<template>
  <!-- 进口狗粮 -->

  <div class="dog-wrap2">
    <ul>
      <li v-for="pic in imgico" :key="pic">
        <img :src="pic.ico" alt="" />
        <p>{{ pic.title }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgico: [
        {
          ico: "http://81.68.133.139:3000/images/store/tab1.png",
          title: "进口狗粮",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab2.png",
          title: "国产狗粮",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab3.png",
          title: "冻干粮",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab4.png",
          title: "全犬期粮",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab5.png",
          title: "小型犬粮",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab6.png",
          title: "中大型犬",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab7.png",
          title: "幼犬粮",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab8.png",
          title: "成犬粮",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab9.png",
          title: "功能狗粮",
        },
        {
          ico: "http://81.68.133.139:3000/images/store/tab10.png",
          title: "老年犬粮",
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.dog-wrap2 {
  // width: 100%;
  height: 195px;
  font-size: 13px;
  text-align: center;
  background-color: #f9f9f9;
  padding: 10px;
  ul {
    width: 100%;
    height: 180px;
    display: flex;
    flex-wrap: wrap;
    // flex: 1;
    justify-content: space-around;
    background-color: #fff;
    // border: 1px solid red;
    li {
      height: 67.5px;
      width: 20%;
      margin-top: 10px;
      margin-bottom: 10px;
      img {
        width: 51px;
        height: 51px;
        margin-bottom: 5px;
      }
    }
  }
}
</style>
